<template>
  <div class="zhucom">
     <div class="d1">
         <form @submit.prevent="zhu()">
        <h1>用户注册</h1>
       <input type="text" class="i1" placeholder="账号" required v-model.lazy.trim="uname" > 
       <br>
       <input type="phone" class="i2" placeholder="手机号" required v-model.lazy.trim="phone" > 
       <br>
       <input type="email" class="i3" placeholder="邮箱" required v-model.lazy.trim="email" > 
       <br>
       <input type="password" class="i4" placeholder="密码" required v-model.lazy.trim="pwd1" > 
       <br>
       <input type="password" class="i5" placeholder="再次确认密码" required v-model.lazy.trim="pwd2" > 
       
       <br>
   
     
       <div class="d2">
       <p class="p1"><input type="checkbox"  v-model="isRem" class="i6" required>是否同意本系统服务条款</p>
      
       
       </div>
     
        <input type="submit" class="b1" value="注册">
        <span @click="b2()">立即登录</span>
     
       
       </form>
    </div>
  </div>
</template>

<script>
import{mapState} from 'vuex';

export default {
name:'ZhuCom',
data(){
    return{
        uname:'',
        phone:'',
        email:'',
        pwd1:'',
        pwd2:'',
        isRem:false
       
    }
},
computed:{
     ...mapState(['user']),

},
methods:{
     
    zhu(){
        if(this.uname!=''&&this.phone!=''&&this.email!=''){
            if(this.pwd1==this.pwd2){
               this.$store.commit('zhulist',{username:this.uname,tel:this.phone,pwd:this.pwd1})                
               this.$router.push('/login');     
            }else{
                alert('两次密码不一致')
                return;
            }
               

        }else{
                //将上一次存储到本地存储的登录账号和密码、上一次记录密码的状态进行清除
            localStorage.clear();
    

    }
    

    },
    b2(){
         this.$router.push('/login');     

    }
}
}
</script>

<style scoped>
.zhucom{
    width: 100%;
    height: 98vh;
  
   
}

.d1{
    display: flex;
    
    text-align: center;
    justify-content: center;
    margin: auto;
    height: 640px;
    width: 500px;
    border: red solid;
    
   

}
.d1 h1{
    margin-top: 30px;
}
.d1 .i1,.i2,.i3,.i4,.i5{
    margin-top: 40px;
    border-radius: 5px;
    border-color: rgb(66, 7, 121);
    outline: none;
    height: 40px;
    width: 450px;
}

.d1 .p1{
    margin-top: 30px;
    margin-right: 265px;
    margin-bottom: 20px;
}
.d1 .b1{
    border-radius: 5px;
    border: none;
    margin-top: 10px;
    margin-right: 30px;
    height: 40px;
    width: 300px;
    margin-left:-60px ;
    background-color: aqua;
}

</style>